*{
    margin: 0;
}
body{
    text-align:center;
    background-color: #f0f3ef;
} 
.all{
    margin: 0 auto;
    width: 500px;
    background-color: azure;
}
.head{
    font-size: 30px;
    color: #333333;
}
.list{
    text-align: left;
    border:#f1f1f1 2px solid;
    border-radius: 6px;
}
li{
    list-style-type: none;
    border-bottom: #f0f3ef  1px solid;
    background-color: #7adfa8;
    border-radius: 5px;
    padding: 10px 20px;;
}
.collection{
    border-radius: 5px;
    padding: 10px 20px;
    background-color: #7adfa8;
}
.out{
    display: none;
    float: right;
}
.import{
    text-align: right;
}
#add{
    margin-top: 20px;
    width: 300px;
    border: #333333 1px solid;
    border-radius: 5px;
}
.sub{
    border-radius: 5px;
    border-bottom-color: #2ecf8c;
    background-color: #2ecf8c;
}
.out{
    border-radius: 5px;
    border-bottom-color: #c02121;
    background-color: #c02121;
}
.finish{
    display: none;
    float: right;
    border-radius: 5px;
    border-bottom-color: #7adfa8;
    background-color: #7adfa8;
}